<template>
    <div class="home" id="screenLine1"></div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById("screenLine1")).setOption({
                title: {
                    text: "营业收入",
                    textStyle: {
                        color: "#B1E2FE",
                        fontSize: "14px",
                    },
                },
                grid: {
                    top: 50,
                    x: 75,
                    x2: 45,
                    y2: 40,
                },
                color: ["pink", "#eee", "red"],
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(32, 33, 36,.7)",
                    borderColor: "rgba(32, 33, 36,0.20)",
                    borderWidth: 1,
                    textStyle: {
                        // 文字提示样式
                        color: "#fff",
                        fontSize: "12",
                    },
                },
                // backgroundColor: 'rgba(0,0,0,0.2)',
                legend: {
                    data: ["目标值", "完成值", "达标率"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "1",
                            "2",
                            "3",
                            "4",
                            "5",
                            "6",
                            "7",
                            "8",
                            "9",
                            "10",
                            "11",
                            "12",
                        ],
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "(万元)",
                        min: 0,
                        max: 60000,
                        interval: 10000,
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                    },
                    {
                        type: "value",
                        min: 0,
                        max: 100,
                        interval: 25,
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "完成值",
                        type: "bar",
                        barWidth: "25%",
                        data: [
                            3305, 7123, 11234, 15882, 20386, 25027, 29795,
                            34451, 39621, 44908,
                        ],
                    },
                    {
                        name: "达标率",
                        type: "line",
                        yAxisIndex: 1,
                        data: [6, 13, 20, 28, 37, 45, 53, 62, 71, 80],
                    },
                    {
                        name: "目标值",
                        type: "line",
                        // yAxisIndex: 1,
                        data: [
                            55850, 55850, 55850, 55850, 55850, 55850, 55850,
                            55850, 55850, 55850, 55850, 55850,
                        ],
                        symbol: "none",
                        smooth: true,
                    },
                ],
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.home {
    width: 100%;
    height: 170px;
}
</style>
  